<template>
  <el-dialog
    :visible.sync="show"
    @closed="handelclose"
    center
    lock-scroll
    :append-to-body="true"
    :close-on-click-modal="false"
    custom-class="showDPFileTOFolder"
  >
    <h2 class="showDPFileTOFolder-head">解压到文件夹</h2>
    <div>
      <el-button type="primary" size="mini" @click="newFile">新建目录</el-button>
    </div>
    <div class="showDPFileTOFolder-main">
      <div class="showDPFileTOFolder-tree">
        <TreeFile
          v-if="show"
          :fileList="newFileList"
          :showCheckBox="false"
          :nodeKey="'id'"
          :expandAll="false"
          :expandOnClickNode="false"
          :defaultProps="defaultProps"
          :className="'filePageTree'"
          ref="tree"
          :showMoreBtn="true"
          @append="append"
          @remove="remove"
          :baseFileUrl="baseFileUrl"
          :text="'新建子目录'"
          :isStuShow="true"
          :unShowUploadBtn="true"
          :unShowDeleteBtn="true"
          key="showDPFileTOFolderTreeFile"
          @select="select"
          :unDecompression="unDecompression"
        />
      </div>
      <div class="showDPFileTOFolder-btns">
        <span>目标路径：{{selectFileData.fileUrl ? selectFileData.fileUrl : "未选择目标路径"}}</span>
        <el-button type="primary" size="small" @click="confirm" :disabled="!selectFileData.fileUrl">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
const TreeFile = () => import("@/components/treeFile/index");
export default {
  components: {
    TreeFile,
  },
  data() {
    return {
      show: false,
      nFileList: [],
      defaultProps: {
        children: "subFiles",
        label: "fileName",
      },
      selectFileNode: {},
      selectFileData: {},
    };
  },
  props: {
    showDialog: Boolean,
    showFileToFolderNode: Object,
    showFileToFolderData: Object,
    fileList: Array,
    tree: Object,
  },
  computed: {
    newFileList() {
      return this.filterNoDir(JSON.parse(JSON.stringify(this.fileList)), this.fileList);
    },
  },
  watch: {
    showDialog(n) {
      if (n) {
        this.show = n;
      }
    },
  },
  methods: {
    handelclose() {
      this.show = false;
      this.selectFileNode = {};
      this.selectFileData = {};
      this.$emit("close");
    },
    // 过滤出不是文件夹的文件
    filterNoDir(data, oldData) {
      const parentTree = this.$parent.$refs.tree?.$refs.tree || {}
      return data.filter((item, index) => {
        if(item.subFiles?.length) {
          item.subFiles = this.filterNoDir(item.subFiles, oldData[index].subFiles)
        }
        item.oldItem = oldData[index];
        /**
         * 可能会出现父组件的树形节点还未渲染完成时，此函数就被调用导致getNode Undefined
         */
        if (parentTree?.getNode) {
          // item.oldNode = parentTree.getNode(oldData[index])
          item.oldNode = {}
          Object.assign(item.oldNode, parentTree.getNode(oldData[index]))
          item = Object.assign({}, item);
          if (item.isDir) {
            return item;
          }
        }
      });
    },
    append(fileName, node, data) {
      this.$emit("append", fileName, node, data);
    },
    remove(node, data) {
      this.$emit("remove", node, data);
    },
    confirm() {
      this.$emit("confirm", this.showFileToFolderNode, this.showFileToFolderData, this.selectFileNode, this.selectFileData );
      this.handelclose();
    },
    select(node, data) {
      this.selectFileNode = data.oldNode;
      this.selectFileData = data.oldItem;
    },
    newFile() {
      this.$emit("newFile");
    },
  },
};
</script>

<style lang="stylus" >
.showDPFileTOFolder {
  min-width: 800px;

  .showDPFileTOFolder-head {
    font-weight: bold;
  }

  .showDPFileTOFolder-tree {
    max-height: 50vh;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .showDPFileTOFolder-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }
}
</style>